<template>
	<view :style="colorStyle">
		<view class="fixed-lt bg--w111-f5f5f5 w-full z-999 header_box" :style="{ 'padding-top': sysHeight + 'px' }">
			<view class="h-80 px-20 flex-y-center">
				<text class="iconfont icon-ic_leftarrow fs-40 text--w111-333" @click="goPage(3)"></text>
				<!--  #ifdef  MP-WEIXIN -->
				<view class="w-444 h-58 rd-30 bg--w111-fff flex-y-center px-32 ml-20">
					<!--  #endif -->
					<!--  #ifndef  MP-WEIXIN -->
					<view class="flex-1 h-58 rd-30 bg--w111-fff flex-y-center px-32 ml-20">
						<!--  #endif -->
						<text class="iconfont icon-ic_search fs-24 text--w111-999"></text>
						<input
							v-model="keyword"
							confirm-type="search"
							@focus="searchFocus"
							@confirm="inputConfirm"
							class="pl-18 flex-1 fs-24"
							placeholder="请输入商品名称"
							placeholder-class="text--w111-999"
						/>
					</view>
				</view>
				<view class="h-100 w-full px-32 flex-between-center fs-26" v-show="!focus">
					<text :class="orderStatus === '' ? 'active' : ''" @click="statusClick('')">全部</text>
					<text :class="orderStatus === 0 ? 'active' : ''" @click="statusClick(0)">待付款</text>
					<text :class="orderStatus === 1 ? 'active' : ''" @click="statusClick(1)">待发货</text>
					<view class="relative">
						<text :class="orderStatus === 2 ? 'active' : ''" @click="statusClick(2)">待收货/核销</text>
						<uni-badge class="uni-badge-left-margin" v-if="orderData.received_count > 0" :text="orderData.received_count"></uni-badge>
					</view>
					<text :class="orderStatus === 3 ? 'active' : ''" @click="statusClick(3)">待评价</text>
				</view>
			</view>
			<view class="pt-32 pl-20 pr-20" :style="{ 'margin-top': marTop - 50 + 'px' }" v-show="focus">
				<view class="fs-28 text--w111-333 fw-500 lh-40rpx mb-24">历史搜索</view>
				<view class="flex flex-wrap">
					<text
						class="inline-block max-200 h-56 line1 lh-56rpx rd-28rpx bg--w111-fff px-24 fs-24 text--w111-666 text-center mr-24 mb-16"
						v-for="(item, index) in historyList"
						:key="index"
						@click="goSearch(item)"
					>
						{{ item }}
					</text>
				</view>
			</view>
			<view class="px-20" :style="{ 'margin-top': marTop + 'px' }" v-show="!focus">
				<view class="order_card " v-for="(item, index) in orderList" :key="index" @click="goOrderDetails(item.order_id)">
					<view v-if="item.is_send_gift" class="send-gift-card z-999">
						<text class="iconfont icon-ic_gift2 text--w111-CA790F fs-32 pr-10"></text>
						<text class="fs-26 text--w111-AE5A2A" v-if="item.receive_gift_uid != 0 && item.receive_gift_uid == uid">{{ item.nickname }} 送的礼物</text>
						<text class="fs-26 text--w111-AE5A2A" v-else>送给 {{ item.receive_gift_uid ? item.receive_gift_user_info.receive_gift_nickname : 'TA' }} 的礼物</text>
					</view>
					<view class="bg--w111-fff rd-24rpx rd-24rpx pt-32 pb-32 pl-24 pr-24" :class="{'-mt-24':item.is_send_gift}">
						<view class="flex-between-center">
							<view class="flex-y-center">
								<text v-if="item.type_name" class="h-32 lh-28rpx bg--w111-fff px-6 rd-6rpx text-center vertical-middle fs-20 border_con font-num">
									{{ item.type_name }}
								</text>
								<text class="fs-28 lh-40rpx text--w111-333 pl-16">{{ item._add_time }}</text>
							</view>
							<view class="fs-26">
								<view class="font-num">
									<text v-if="item.is_send_gift">{{ item.receive_gift_uid == 0 ? '待领取' : '已领取' }}</text>
									<template v-else>
										<text v-show="item.is_del == 0">{{ item._status._title }}</text>
										<text v-show="item.is_del == 1">交易取消</text>
										<text v-if="item.refund.length">{{ item.is_all_refund ? '，退款中' : '，部分退款中' }}</text>
									</template>
								</view>
							</view>
						</view>
						<view class="mt-26" v-if="item.cartInfo.length && item.cartInfo.length == 1">
							<view class="flex justify-between" v-for="(items, i) in item.cartInfo" :key="i">
								<view class="flex">
									<easy-loadimage :image-src="items.productInfo.image" width="136rpx" height="136rpx" borderRadius="16rpx"></easy-loadimage>
									<view class="ml-20">
										<view class="w-270 fs-28 text--w111-333 lh-40rpx line2">
											{{ items.productInfo.store_name }}
										</view>
										<view class="w-270 fs-24 text--w111-999 lh-34rpx line1 mt-12">{{ items.productInfo.attrInfo.suk }}</view>
									</view>
								</view>
								<view>
									<view class="acea-row">
										<view class="acea-row row-middle" v-if="parseFloat(item.pay_integral)">
											<image src="/static/img/mall05.png" style="width: 30rpx; height: 30rpx;margin-right: 6rpx;"></image>
											<text class="font-num" style="font-family: SemiBold;font-size: 34rpx;">{{ item.pay_integral }}</text>
										</view>
										<text style="margin: 0 10rpx;"  v-if="parseFloat(item.pay_price)">+</text>
										<baseMoney
											v-if="items.productInfo.attrInfo && item.receive_gift_uid != uid && parseFloat(item.pay_price)"
											:money="item.pay_price"
											symbolSize="20"
											integerSize="32"
											decimalSize="20"
											incolor="#333333"
											weight
										></baseMoney>
									</view>
									<view class="fs-24 text--w111-999 lh-34rpx text-right">共{{ item.total_num }}件</view>
								</view>
							</view>
						</view>
						<view class="mt-26 relative" v-if="item.cartInfo.length && item.cartInfo.length > 1">
							<scroll-view scroll-x="true" class="white-nowrap vertical-middle w-560" show-scrollbar="false">
								<view class="inline-block mr-16" v-for="(items, i) in item.cartInfo" :key="i">
									<easy-loadimage :image-src="items.productInfo.image" width="136rpx" height="136rpx" borderRadius="16rpx"></easy-loadimage>
								</view>
							</scroll-view>
							<view class="abs-rt h-136 flex-col flex-center">
								<baseMoney v-if="item.receive_gift_uid != uid" :money="item.pay_price" symbolSize="20" integerSize="32" decimalSize="20" incolor="#333333" weight></baseMoney>
								<view class="fs-24 text--w111-999 lh-34rpx text-right">共{{ item.total_num }}件</view>
							</view>
						</view>
						<view class="h-72 rd-8rpx bg--w111-f5f5f5 mt-26 px-20 flex-between-center">
							<view v-show="item.is_del == 0" @click.stop="goRefundDetails">
								<text class="text--w111-333 fs-26">{{ item._status._title }}</text>
								<text class="text--w111-999 fs-26 pl-20">{{ item._status._msg }}</text>
							</view>
							<view v-show="item.is_del == 1">
								<text class="text--w111-333 fs-26">已取消</text>
								<text class="text--w111-999 fs-26 pl-20">本次交易已取消，感谢您的支持</text>
							</view>
							<text class="iconfont icon-ic_rightarrow fs-24 text--w111-999"></text>
						</view>
					</view>
				</view>
				<block v-if="orderList.length == 0 && !loading">
					<emptyPage title="暂无订单信息～" :src="keyword ? '/statics/images/noSearch.gif' : '/statics/images/noOrder.gif'"></emptyPage>
				</block>
				<view class="loadingicon flex-center" v-if="orderList.length > 0">
					<text class="loading iconfont icon-ic_Refresh" :hidden="loading == false"></text>
					<text class="fs-26 pb-32">{{ loadTitle }}</text>
				</view>
			</view>
			<!-- 确认框 -->
			<tuiModal :show="showModal" :title="modalTitle" :content="modalContent" :maskClosable="false" @click="handleClick" @cancel="hideModal"></tuiModal>
		</view>
	</view>
</template>

<script>
let sysHeight = uni.getWindowInfo().statusBarHeight;
import { getOrderList, orderData, orderCancel, orderDel, orderPay, orderAgain } from '@/api/order.js';
import { openOrderSubscribe } from '@/utils/SubscribeMessage.js';
import tuiModal from '@/components/tui-modal/index.vue';
import { toLogin } from '@/libs/login.js';
import { mapGetters } from 'vuex';
import emptyPage from '@/components/emptyPage.vue';
import colors from '@/mixins/color.js';
import Loading from '@/components/Loading/index.vue';
export default {
	components: {
		Loading,
		emptyPage,
		tuiModal
	},
	mixins: [colors],
	data() {
		return {
			sysHeight: sysHeight,
			loaded: false,
			loading: false, //是否加载中
			loadend: false, //是否加载完毕
			loadTitle: '加载更多', //提示语
			orderList: [], //订单数组
			orderData: {}, //订单详细统计
			orderStatus: '', //订单状态
			orderType: '', //订单类型
			page: 1,
			limit: 20,
			pay_close: false,
			pay_order_id: '',
			totalPrice: '0',
			isAuto: false, //没有授权的不会自动授权
			isShowAuth: false, //是否隐藏授权
			keyword: '',
			marTop: 0,
			focus: false,
			// 搜索历史
			historyList: [],
			// 临时搜索列表
			tempStorage: [],
			//确认模态框
			showModal: false,
			modalTitle: '',
			modalContent: '',
			modalType: 0,
			orderId: '',
			uid: 0
		};
	},
	computed: {
		...mapGetters(['isLogin']),
		fixedTop() {
			// #ifdef MP || APP-PLUS
			return this.sysHeight + 'px';
			// #endif
			return this.data;
			// #ifndef MP
			return 0;
			// #endif
		}
	},
	onShow() {
		uni.removeStorageSync('form_type_cart');
		this.page = 1;
		this.loadend = false;
		this.orderList = [];
		this.uid = this.$store.state.app.uid;
		if (this.isLogin) {
			this.getFun();
		} else {
			toLogin();
		}
	},
	onPageScroll(object) {
		uni.$emit('scroll');
	},
	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad(options) {
		if (options.status) this.orderStatus = options.status == undefined && options.status != 0 ? '' : parseInt(options.status);
		if (options.type) this.orderType = options.type == undefined && options.type != 0 ? '' : parseInt(options.type);
		this.getMarTop();
	},
	methods: {
		getFun() {
			this.getOrderData();
			this.getOrderList();
		},
		onLoadFun() {
			this.getFun();
			this.isShowAuth = false;
		},
		getMarTop() {
			let that = this;
			setTimeout(() => {
				// 获取小程序头部高度
				let info = uni.createSelectorQuery().in(this).select('.header_box');
				info
					.boundingClientRect(function (data) {
						that.marTop = data.height;
					})
					.exec();
			}, 100);
		},
		/**
		 * 获取订单统计数据
		 *
		 */
		getOrderData: function () {
			let that = this;
			orderData({ channel: this.$store.state.app.identity == 1 ? 1 : '' }).then((res) => {
				that.$set(that, 'orderData', res.data);
			});
		},
		showModalChange(orderId, type) {
			this.orderId = orderId;
			this.modalType = type;
			if (type == 1) {
				this.modalTitle = '确认收货';
				this.modalContent = '为保障权益，请收到货确认无误后，再确认收货';
			} else if (type == 2) {
				this.modalTitle = '删除订单';
				this.modalContent = '确定删除该订单?';
			} else if (type == 3) {
				this.modalTitle = '温馨提示';
				this.modalContent = '确认取消该订单?';
			}
			this.showModal = true;
		},
		handleClick(e) {
			let index = e.index;
			if (index == 1) {
				if (this.modalType == 1) {
					orderTake(this.orderId)
						.then((res) => {
							this.showModal = false;
							this.goSearch('');
							this.getOrderData();
						})
						.catch((err) => {
							return this.$util.Tips({
								title: err
							});
						});
				} else if (this.modalType == 2) {
					orderDel(this.orderId).then((res) => {
						this.showModal = false;
						this.goSearch('');
						this.getOrderData();
					});
				} else if (this.modalType == 3) {
					this.showModal = false;
					orderCancel(this.orderId).then(() => {
						this.goSearch('');
						this.getOrderData();
					});
				}
			} else {
				this.showModal = false;
			}
		},
		hideModal() {
			this.showModal = false;
		},
		/**
		 * 取消订单
		 *
		 */
		cancelOrder: function (index, order_id) {
			let that = this;
			if (!order_id)
				return that.$util.Tips({
					title: '缺少订单号无法取消订单'
				});
			orderCancel(order_id)
				.then((res) => {
					return that.$util.Tips(
						{
							title: res.msg,
							icon: 'success'
						},
						function () {
							that.orderList.splice(index, 1);
							that.$set(that, 'orderList', that.orderList);
							that.$set(that.orderData, 'unpaid_count', that.orderData.unpaid_count - 1);
							that.getOrderData();
						}
					);
				})
				.catch((err) => {
					return that.$util.Tips({
						title: err
					});
				});
		},
		goPay: function (order_id) {
			uni.redirectTo({
				url: `/pages/goods/cashier/index?order_id=${order_id}&from_type=order`
			});
		},
		goRefundDetails() {
			if (!order_id)
				return this.$util.Tips({
					title: '缺少订单号无法查看订单详情'
				});
			uni.navigateTo({
				url: '/pages/goods/order_after_details/index?order_id=' + order_id + '&isReturen=1'
			});
		},
		goOrderDetails(order_id) {
			if (!order_id)
				return this.$util.Tips({
					title: '缺少订单号无法查看订单详情'
				});
			// #ifdef MP
			uni.showLoading({
				title: '正在加载'
			});
			openOrderSubscribe()
				.then(() => {
					uni.hideLoading();
					uni.navigateTo({
						url: '/pages/goods/order_details/index?order_id=' + order_id
					});
				})
				.catch((err) => {
					uni.hideLoading();
				});
			// #endif
			// #ifndef MP
			uni.navigateTo({
				url: '/pages/goods/order_details/index?order_id=' + order_id
			});
			// #endif
		},
		/**
		 * 切换类型
		 */
		statusClick: function (status) {
			if (this.loading) return;
			if (status === this.orderStatus) return;
			this.orderStatus = status;
			this.loadend = false;
			this.page = 1;
			this.$set(this, 'orderList', []);
			this.getOrderList();
		},
		searchFocus() {
			try {
				this.historyList = [];
				this.tempStorage = [];
				let arr = uni.getStorageSync('orderHistoryList');
				if (arr.length > 0) {
					this.historyList = Array.from(new Set(arr));
				} else {
					this.historyList = [];
				}

				this.tempStorage = this.historyList;
			} catch (e) {}
			this.focus = true;
		},
		goSearch(keyword) {
			this.loadend = false;
			this.loading = false;
			this.keyword = keyword;
			this.page = 1;
			this.orderList = [];
			this.getOrderList();
		},
		inputConfirm() {
			this.loadend = false;
			this.loading = false;
			this.page = 1;
			this.orderList = [];
			this.getOrderList();
			setTimeout((e) => {
				let arr = this.tempStorage;
				if (this.keyword !== '') {
					arr.unshift(this.keyword);
					this.tempStorage = [...Array.from(new Set(arr))];
					uni.setStorageSync('orderHistoryList', this.tempStorage);
				}
			}, 1000);
		},
		/**
		 * 获取订单列表
		 */
		getOrderList: function () {
			let that = this;
			if (that.loadend) return;
			if (that.loading) return;
			that.loading = true;
			that.loadTitle = '加载更多';
			getOrderList({
				status: that.orderStatus,
				page: that.page,
				limit: that.limit,
				search: this.keyword,
				channel: this.$store.state.app.identity == 1 ? 1 : ''
			})
				.then((res) => {
					let list = res.data || [];
					let loadend = list.length < that.limit;
					that.orderList = that.$util.SplitArray(list, that.orderList);
					that.$set(that, 'orderList', that.orderList);
					that.loadend = loadend;
					that.loading = false;
					that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
					that.page = that.page + 1;
					that.focus = false;
				})
				.catch((err) => {
					that.loading = false;
					that.loadTitle = '加载更多';
				});
		},

		/**
		 * 删除订单
		 */
		delOrder: function (order_id, index) {
			let that = this;
			uni.showModal({
				title: '删除订单',
				content: '确定删除该订单',
				success: function (res) {
					if (res.confirm) {
						orderDel(order_id)
							.then((res) => {
								that.orderList.splice(index, 1);
								that.$set(that, 'orderList', that.orderList);
								that.$set(that.orderData, 'unpaid_count', that.orderData.unpaid_count - 1);
								that.getOrderData();
								return that.$util.Tips({
									title: '删除成功',
									icon: 'success'
								});
							})
							.catch((err) => {
								return that.$util.Tips({
									title: err
								});
							});
					} else if (res.cancel) {
						return that.$util.Tips({
							title: '已取消'
						});
					}
				}
			});
		},
		goPage(type, url) {
			if (type == 1) {
				uni.navigateTo({
					url
				});
			} else if (type == 2) {
				uni.switchTab({
					url
				});
			} else if (type == 3) {
				let pages = getCurrentPages(); // 获取当前打开过的页面路由数，
				if (pages.length > 1) {
					uni.navigateBack();
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			}
		}
	},
	onReachBottom: function () {
		this.getOrderList();
	}
};
</script>

<style scoped lang="scss">
.border_con {
	border: 1px solid var(--view-theme);
}

.border_ccc {
	border: 1rpx solid #ccc;
}

.active {
	color: var(--view-theme);
	font-weight: 500;
	font-size: 30rpx;
}

.abs-rt {
	position: absolute;
	top: 0;
	right: 0;
}
.w-270 {
	width: 270rpx;
}
.order_card ~ .order_card {
	margin-top: 20rpx;
}
.btn ~ .btn {
	margin-left: 16rpx;
}
.uni-badge-left-margin {
	position: absolute;
	top: -16rpx;
	right: -30rpx;
	/deep/ .uni-badge--error {
		background-color: var(--view-theme) !important;
	}
	.uni-badge {
		color: var(--view-theme);
		border: 1px solid var(--view-theme);
		z-index: 29;
	}
}
.send-gift-card {
	background-color: #fefaf3;
	padding: 24rpx 24rpx 48rpx 24rpx;
	border-radius: 16rpx 16rpx 0 0rpx;
	color: #ae5a2a;
	font-size: 26rpx;
}
</style>